<template>
  <div
    ref="bar"
    class="bar"
  >
  </div>
</template>

<script>
export default {
  name: 'Bar',
  props: {
    'settings': {
      type: Object
    },
    'dataList': {
      type: Array,
      default () {
        return []
      }
    },
    'title': {
      type: String,
      default: ''
    },
    'labelNuit': {
      type: String,
      default: ''
    },
    'maxVal': {
      type: Number,
      default: null
    },
    'rotate': {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      defaultSettings: {
        xData: [], // 必填
        data: [], // 必填
        linearGradient: [], // 必填
        minVal: 0,
        maxVal: this.maxVal,
        labelHide: true,
        labelNuit: '{c}人',
        xHide: false,
        yHide: true,
        yName: '',
        yPosition: 'left',
        dataList: [],
        title: ''
        // grid: {
        //   top: '0%',
        //   left: '0%',
        //   right: '5%',
        //   bottom: '20%',
        //   containLabel: true
        // }
      },
      lineSeries: {
        data: [],
        type: 'line',
        symbol: 'none',
        smooth: true,
        lineStyle: {
          normal: {
            width: 1,
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
              [
                {
                  offset: 0,
                  color: this.settings.linearGradient[0]
                },
                {
                  offset: 1,
                  color: this.settings.linearGradient[1]
                }
              ]
            )
          }
        }
      }
    }
  },
  computed: {
    setting () {
      return window.$.extend({}, this.defaultSettings, this.settings)
    },
    lineData () {
      const arr = this.setting.data.map((item, index) => {
        item += 2
        return item
      })
      return arr
    }
  },
  watch: {
    'setting': {
      deep: true,
      handler: function () {
        this.draw()
      }
    },
    'dataList': {
      deep: true,
      handler: function () {
        this.draw()
      }
    }
  },
  mounted () {
    this.draw()
    this.$common.winResize(this.$echarts.init(this.$refs.bar))
  },
  methods: {
    draw () {
      const arr = this.setting.data.map((item, index) => {
        item += 0
        return item
      })
      this.lineSeries.data = arr
      const $bar = this.$echarts.init(this.$refs.bar)
      const $echarts = this.$echarts
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(255, 255, 255, .05)'
            }
          },
          backgroundColor: 'rgba(7, 23, 71, .8)',
          padding: 10,
          borderColor: '#2c76c0',
          borderWidth: 1,
          textStyle: {
            color: '#45beed'
          }
        },
        grid: {
          top: '0%',
          left: '0%',
          right: '5%',
          bottom: '0%',
          containLabel: true
        },
        yAxis: {
          data: this.setting.xData,
          axisLine: {
            show: false
          },
          axisLabel: {
            padding: [0, 0, 0, 10],
            show: !this.setting.xHide,
            rotate: this.rotate,
            textStyle: {
              color: '#536390'
            },
            formatter: function (params) {
              var newParamsName = ''
              var paramsNameNumber = params.length
              var provideNumber = 7
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            }
          }
        },
        xAxis: {
          name: this.setting.yName,
          nameTextStyle: {
            color: '#536390',
            padding: [0, 0, 0, 20]
          },
          type: 'value',
          position: this.setting.yPosition,
          min: this.setting.minVal,
          max: this.setting.maxVal,
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(57, 121, 211, .5)'
            }
          },
          splitArea: {
            show: false,
            areaStyle: {
              color: ['rgba(24, 61, 111, .4)', 'rgba(24, 61, 111, 0)']
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: !this.setting.yHide,
            textStyle: {
              color: '#536390'
            }
          }
        },
        series: [
          {
            type: 'bar',
            data: this.setting.data,
            barWidth: 20,
            label: {
              show: this.setting.labelHide,
              position: 'right',
              formatter: this.setting.labelNuit,
              color: '#4dd5ff'
            },
            itemStyle: {
              normal: {
                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: this.setting.linearGradient[0]
                    },
                    {
                      offset: 1,
                      color: this.setting.linearGradient[1]
                    }
                  ]
                )
              }
            }
          }
        ]
      }
      if (this.dataList.length !== 0) {
        option.series[0].data = this.dataList
      }
      if (this.title !== '') {
        option.title = {
          text: this.title,
          left: 'center',
          bottom: '0',
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        }
      }
      if (this.setting.hasLine) {
        option.series.push(this.lineSeries)
        option.tooltip.trigger = 'item'
      }
      if (this.setting.color !== undefined) {
        option.series[0].itemStyle.normal.color = this.setting.color
      }
      $bar.setOption(option, true)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .bar
    width: 100%
    height: 100%
</style>
